<!-- 危化品车进出记录 -->
<template>
  <div class="dy-panel">
    <div class="dy-panel-main" style="width: 90vh">
      <div class="dy-panel-header">
        <div class="dy-panel-close" @click="closeCurrent"></div>
      </div>
       <div class="dy-panel-content">
        <contentTitle :title="'车牌类型占比'"></contentTitle>
        <div class="layChart" ref="cplxzbRef"></div>
      </div>

      <div class="layer-bottom">
        <div class="pd_abItems-contain" style="justify-content: left">
          <div class="pd_abItems-main">
            <div v-for="(item,index) in abItems" :class="{'pd_abItem-item':true,'selected':item.clazz === 'selected'}" @click="abItemsClick(item)">{{item.title}}</div>
          </div>
          <div class="block_select_contain">
            <el-cascader :options="selectOptions" :show-all-levels="false" placeholder="请选择服务区"
                         @change="serverHandleChange" v-model="curServer" filterable clearable></el-cascader>
          </div>
          <el-date-picker
              class="custom-date-picker"
              v-model="today"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
          <div class="pd-abItem-search" style="position: relative">
            <button class="pd-abItem-search-btn" @click="search">查询</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {computed, onMounted, ref} from "vue";
import ContentTitle from "../contentTitle.vue";
import {drawLine} from "../../../util/chartUtil.js";
import {ajaxRequest} from "../../../api/code.js";
const emit = defineEmits(['closeChild']);
const closeCurrent = function (){
  emit('closeChild')
}

const curServer = ref("")
//设置服务区下拉框值
const selectOptions = ref([{
  id: 24193,
  value: '河北高速燕赵驿行集团有限公司',
  label: '河北高速燕赵驿行集团有限公司',
  children: [{
    id: 349,
    value: '滦州服务区',
    label: '滦州服务区'
  }, {
    id: 0,
    value: '丰润停车区',
    label: '丰润停车区'
  }]
}])

const serverHandleChange = (selectItem) => {
  // console.log(selectItem);
  curServer.value = selectItem
}
const areacode = ref(null)
const abItems = ref([{title:'综合',clazz:'selected'},{title:'东(南)',clazz:''},{title:'西(北)',clazz:''}])
const abItemsClick = function (item){
  abItems.value.forEach((res,i)=>{
    res.clazz = res.title === item.title?'selected':"";
  })
  if(item.title === '综合'){
    areacode.value = null
  }
  else if(item.title === '东(南)'){
    areacode.value = "01"
  }
  else if(item.title === '西(北)'){
    areacode.value = "02"
  }
}

const today = ref([new Date(),new Date()]);
const search = function (){
  // console.log(today.value);
  refreshData()
}
const cplxzbRef = ref();
const getCplxzbOpt = function (data_x){

  const data_legend = ref(['蓝牌','黄牌','绿牌','其他']);
  if(!data_x){
    data_x = ref([0,0,0,0]);
  }
  const data_1 = ref(data_x.value[0]); //20人数： 12人
  const data_2 = ref(data_x.value[1]); //20-30人数： 12人
  const data_3 = ref(data_x.value[2]); //30-40人数： 12人
  const data_4 = ref(data_x.value[3]); //30-40人数： 12人

  const data_total = ref(data_1.value + data_2.value + data_3.value + data_4.value); //总人数

  //处理数据 不用管
  const date_bar_2 = data_1.value + data_2.value;
  const data_bar_3 = date_bar_2 + data_3.value;
  const data_bar_4 = data_bar_3 + data_4.value;

  const cplxzbOpt = ref({
    legend: {
      orient:'vertical',
      data: data_legend.value,
      right: '10%',
      top: '18%',
      textStyle:{
        color: '#FFFFFF',
        fontSize: 18
      },
      icon:'rect',
      itemWidth: 18,
      itemHeight: 18,
      itemGap:25,
      formatter:function (params){
        const x =  data_x.value[data_legend.value.indexOf(params)]
        const t = data_total.value;
        if(x <1 || t < 1){
          return `  ${params}   0% `;
        }
        const rate = (x/t*100).toFixed(2);
        return `  ${params}   ${rate}% `;
      }
    },
    angleAxis: {
      show: false,
      max: data_bar_4,
      type: 'value',
      startAngle: 180,
      endAngle: 0,
      splitLine: {
        show: false
      }
    },
    barMaxWidth: 20, //圆环宽度
    radiusAxis: {
      show: false,
      type: 'category',
    },
    //圆环位置和大小
    polar: {
      center: ['40%', '60%'],
      radius: '300'
    },
    series: [{
      name: data_legend.value[0],
      color: '#55A4F8',
      type: 'bar',
      data: [{
        value: data_1,
        itemStyle: {
          color: '#55A4F8',
        },
      }],
      barGap: '-100%',
      coordinateSystem: 'polar',
      roundCap: true,
      z: 4
    }, {
      name: data_legend.value[1],
      color: '#ECB73F',
      type: 'bar',
      data: [{
        value: date_bar_2,
        itemStyle: {
          color: '#ECB73F',
        },
      }],
      barGap: '-100%',
      coordinateSystem: 'polar',
      roundCap: true,
      z: 3
    },{
      name: data_legend.value[2],
      color: '#89D13F',
      type: 'bar',
      data: [{
        value: data_bar_3,
        itemStyle: {
          color: '#89D13F',
        },
      }],
      barGap: '-100%',
      coordinateSystem: 'polar',
      roundCap: true,
      z: 2
    },
      { //下层圆环，显示最大值
        name: data_legend.value[3],
        color: '#75D4B7',
        type: 'bar',
        data: [{
          value: data_bar_4,
          itemStyle: {
            color: '#75D4B7',
            borderWidth: 0,
          },
        }],
        barGap: '-100%',
        coordinateSystem: 'polar',
        roundCap: true,
        z: 0
      },
      //仪表盘
      {
        type: 'gauge',
        startAngle: 180, //起始角度，同极坐标
        endAngle: 0, //终止角度，同极坐标
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitLabel: {
          show: false
        },
        pointer: { // 分隔线
          show: false,
          width: 0
        },
        itemStyle: {
          color: '#70D5FF'
        },
        detail: {
          formatter: function(params) {
            return '{a|' + data_total.value + '}\n{b|总车流}'
          },
          textStyle: {
            rich: {
              a: {
                fontSize: 50,
                color: '#FFF',
                fontWeight: 'bold',
                lineHeight: 50
              },
              b: {
                fontSize: 18,
                color: '#FFF',
              },
            }
          },
          offsetCenter: [-80, -10],
        },
        title: {
          show: false
        },
        data: [{}]
      }
    ]
  });
  return cplxzbOpt
}



let cplxzbChart
onMounted(() => {
  let cplxzbOpt = getCplxzbOpt()
  cplxzbChart = drawLine(cplxzbRef.value,cplxzbOpt.value);
  getFwqxx()
  refreshData()
})

async function refreshData() {
  let startdate,enddate
  //手动输入
  if(today.value[0].$d){
    startdate = formatDate(today.value[0].$d)
    enddate = formatDate(today.value[1].$d)
  }else{
    startdate = formatDate(today.value[0])
    enddate = formatDate(today.value[1])
  }
  const params = {
    areacode: areacode.value,
    compid: curServer.value[1],
    startdate: startdate,
    enddate: enddate
  }

  const result = await ajaxRequest('post', 'getCxzb', params)
  let lvse = 0,huangse = 0,lanse = 0,qita = 0;
  if (result.data && result.data.length>0) {
    result.data.forEach((item,index)=>{
      if("绿色" == item.express || "黄绿双色" == item.express || "渐变绿色" == item.express || "渐变绿"== item.express || "黄绿双拼"== item.express){
        lvse += item.cnt;
      }
      else if("黄色" == item.express || "黄底黑字" == item.express){
        huangse += item.cnt;
      }
      else if("蓝色" == item.express || "蓝底白字" == item.express){
        lanse += item.cnt;
      }
      else{
        qita += item.cnt;
      }
    })
  }
  //ref(['蓝牌','黄牌','绿牌','其他']);
  let cplxzbOpt = getCplxzbOpt(ref([lanse,huangse,lvse,qita]))
  cplxzbChart.setOption(cplxzbOpt.value)
}

/**
 * 获取服务区档案信息
 */
 async function getFwqxx() {
  selectOptions.value[0].children = []
  const result = await ajaxRequest('post', 'getFwqxx', {})
  if (result.data && result.data.length>0) {
    result.data.forEach((item,index)=>{
      selectOptions.value[0].children.push({id:item.id,value:item.id,label:item.compname})
    })
  }
}

function formatDate(date) {
  function padZero(num) {
    return num < 10 ? '0' + num : num;
  }
  var year = date.getFullYear();
  var month = padZero(date.getMonth() + 1);
  var day = padZero(date.getDate());
  return `${year}-${month}-${day}`;
}
</script>

<style scoped>
.dy-panel-main{
  padding:2.5vh;
}

.layer-bottom{
  padding-left:5vh;
  padding-top: 2vh;
  padding-bottom: 1vh;
  border-top: 2px solid #1D4F59;
}

:deep(.el-input__wrapper){
  background-color: transparent !important;
  color: #FFFFFF !important;
  height: 3vh;
  flex-grow: 0.5 !important;
  width: 16.3vh;
  margin-right: 2vh;
}
:deep(.custom-date-picker){
  width: 22vh !important; /* 确保您的样式被应用 */
}
:deep(.el-date-editor .el-range-input){
  color: #FFFFFF !important;
}
:deep(.el-date-editor .el-range-separator){
  color: #FFFFFF !important;
}

</style>
